<template>
    <div class="main">
<div id="msg_box">
            <div class="top">
                <van-nav-bar  :title="'与 '+msg_user.nickname+' 的聊天'"  left-arrow  @click-left="msgBoxGoBack"/>
            </div>
            <div class="msg" ref="msglist">
                <div class="list">
                    <div class="item" v-for="(item,index) in msg_list" :key="index" :type="item.send_type">
                        <div class="tips" v-if="item.type == 'unsubscribe' || item.type == 'subscribe'">
                            <span v-if="item.type == 'unsubscribe'">该用户取消关注</span>
                            <span v-if="item.type == 'subscribe'">新用户关注</span>
                        </div>
                        
                        <div class="headpic" v-if="item.send_type == 1001 && item.type !='unsubscribe' && item.type != 'subscribe'">
                            <img :src="msg_user.headimgurl">
                        </div>
                        <div class="headpic" v-else-if="item.send_type == 1002 && item.type !='unsubscribe' && item.type != 'subscribe'">
                            <img :src="cs_user.header_url?URL.server+cs_user.header_url:'http://suo.im/4nci1t'">
                        </div>
                        <div class="content" v-if="item.type == 'text'&&item.type !='unsubscribe' && item.type != 'subscribe'" type="text">
                            <pre>{{item.content}}</pre>
                            <div class="status" :type="item.send_state" v-if="item.send_type == 1002"></div>
                        </div>
                        <div class="content pic" v-if="item.type == 'image'&&item.type !='unsubscribe' && item.type != 'subscribe'" type="text">
                            <img class="msgpic" preview="0"  :src="item.content"/>
                            <div class="status" :type="item.send_state" v-if="item.send_type == 1002"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ChatRecord",
        data() {
            return {
                msg_user:{},msg_list:[]
            };
        },
        created: function(){
            window.$vm = window.$vm || {};
            $vm.ChatRecord = this;
            new Promise(function(deno,erroe){
                var user_info = $vm.ChatRecord.$fn.getMsgList($vm.ChatRecord.$route.params.userId);
                var cs_user = $vm.ChatRecord.$fn.getCookie('user');
                $vm.ChatRecord.msg_user = user_info;
                $vm.ChatRecord.cs_user = cs_user;
                $.post($vm.ChatRecord.URL.server+'/api/User/getChatLog',{
                    cs_id:cs_user.id,
                    openid:user_info.openid
                },function(res){
                    res = JSON.parse(res);
                    $vm.ChatRecord.msg_list = res.chatlog;
                    console.log($vm.ChatRecord.msg_list);
                });
            })
        },
        methods:{
            
          msgBoxGoBack:()=>{
              $vm.ChatRecord.$router.back(-1)
          }
        }
    };
</script>

<style lang="less" scoped>
    *{font-family: 微软雅黑;}
    body,html,.main{
        width:100%;height:100%;
    }
    #msg_box{
        width:100vw;height:100%;position: fixed;top:0;left:0;z-index: 9;background:#fff;
        .top{
            height:44px;background:#ffffff;border-bottom: 1px solid #d4d4d4;
            i{
                color:#000;font-weight: 600;
            }
        }
        .msg{
            position: absolute;top:45px;bottom:0px;background:#f2f2f2;width:100%;overflow: hidden;overflow-y: auto;
            transition:all 0.1s;
            &.open{
                bottom:250px;
            }
            .list{
                .item{
                    margin:27px 0;padding:0 10px;
                    .tips{
                        text-align: center;
                        span{
                            display: inline-block;max-width: 220px;font-size: 12px;padding:2px 15px;border-radius: 10px;background:#999;color:#fff;
                        }
                    }
                    &::after{
                        content: "";display: block;clear: both;
                    }
                    .headpic{
                        width:50px;height:50px;float:left;
                        img{
                            width:100%;height:100%;border-radius:50%;
                        }
                    }
                    .content{
                        display: inline-block;max-width:60%;margin-left: 14px;margin-top:10px;padding:8px 10px;border-radius:5px;position: relative;
                        &::after{
                            content: "";width:0;height:0;border:solid #fff 5px;border-width: 5px 8px;border-color:transparent #fff transparent transparent;
                            position: absolute;top:15px;left:-16px;
                        }
                        .status{
                            position:absolute;width:20px;height:20px;border-radius:50%;
                            text-align:center;line-height:20px;
                            top:10px;left:-25px;
                            &[type="2"]{//发送中
                                background:url('../assets/loading.gif');background-size:100% 100%;
                            }
                            &[type="1"]{//发送完成
                                
                            }
                            &[type="0"]::after{
                                content:'!'
                            }
                            &[type="0"]{//失败
                                background:red;color:#fff;
                            }
                        }
                        pre{
                            display: inline-block;margin:0;white-space: pre-wrap; text-align: justify;font-size: 16px;line-height: 1.5em;
                            color:#252525;
                        }
                        &.pic{
                            padding:3px;font-size:0px;
                        }
                        .msgpic{
                            max-width:100px;max-height:200px;
                        }
                    }
                    &[type="1001"]{
                        .content{
                            background:#ffffff;
                        }
                    }
                    &[type="1002"]{
                        .content{
                            background:#6098f9;float: right;margin-left: 0;margin-right: 14px;
                            &::after{
                                left:auto;right:-16px;border-color:transparent transparent transparent #6098f9;
                            }
                        }
                        .headpic{
                            float: right;
                        }
                    }
                }
            }
        }
        
    }
</style>
